<template>
	<view>
		<view class="list-item" v-for="(item, index) in carList" :key="index">
			<image :src="item.image" mode=""></image>
			<view class="right">
				<text class="title">{{item.title}}</text>
				<view class="count">
					<button @click="handleDelete(item)">-</button>
					<text>{{item.count}}</text>
					<button @click="addCarList(item)">+</button>
				</view>
				<view class="price">{{item.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('car', ['carList'])
		},
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('car', ['addCarList', 'subCarList', 'deleteCarList']),
			handleDelete(item) {
				if (item.count > 1) {
					this.subCarList(item)
				} else {
					uni.showModal({
						title: '警告',
						content: "在减少就要删除了！",
						success: ({
							confirm
						}) => {
							if (confirm) {
								console.log((123))
								this.deleteCarList(item)
							}
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		display: flex;

		image {
			width: 200px;
			height: 200px;

		}

		.count {
			display: flex;
		}

	}
</style>